<template>
	<div class="box">
		<div class="coop">成为合伙人</div>
		<div class="container">
			<a-form
				ref="formRef"
				:model="formData"
				:rules="formRules"
				label-align="left"
				:label-col="labelCol"
				:wrapper-col="wrapperCol"
			>
				<a-form-item label="姓名：" name="name">
					<a-input v-model:value="formData.name" :maxlength="20" placeholder="请输入姓名" autocomplete="off"></a-input>
				</a-form-item>
				<a-form-item label="手机号：" name="phone">
					<a-input
						v-model:value="formData.phone"
						:maxlength="11"
						placeholder="请输入手机号"
						autocomplete="off"
					></a-input>
				</a-form-item>
				<a-form-item label="公司名称：" name="company" extra="如果是自然人个体，公司可以不填">
					<a-input
						v-model:value="formData.company"
						:maxlength="20"
						placeholder="请输入公司名称"
						autocomplete="off"
					></a-input>
				</a-form-item>
				<a-form-item label="目标服务城市：" name="target">
					<a-input v-model:value="formData.target" placeholder="请输入目标服务城市" autocomplete="off"></a-input>
				</a-form-item>
				<a-form-item label="擅长行业：" name="industry">
					<a-input v-model:value="formData.industry" placeholder="请输入擅长行业"></a-input>
				</a-form-item>
				<a-form-item label="邮箱：" name="email" extra="审核完成,会通过您输入的邮箱发送邮件通知,请注意查收">
					<a-input v-model:value="formData.email" placeholder="请输入邮箱" autocomplete="off"></a-input>
				</a-form-item>
				<a-form-item label="合作期望：" name="demand">
					<a-textarea
						:rows="4"
						v-model:value="formData.demand"
						placeholder="如在浙江省内合作推广大数据客流研究产品;有明确项目可以在注册成功后报备项目"
						autocomplete="off"
					></a-textarea>
				</a-form-item>
			</a-form>
			<div style="display: flex; justify-content: center; align-items: center">
				<a-button type="primary" size="large" style="margin: 30px auto" :loading="joinLoading" @click="onSubmit"
					>成为合伙人</a-button
				>
			</div>
		</div>
	</div>
</template>

<script setup>
	import { required, rules } from '@/utils/formRules'
	import dayjs from 'dayjs'
	import apis from './api'
	import { notification } from 'ant-design-vue'

	// 默认是关闭状态
	const visible = ref(false)
	const emit = defineEmits({ successful: null })
	const formRef = ref()
	// 表单数据
	const formData = ref({})

	const labelCol = { style: { width: '150px' } }
	const wrapperCol = { span: 14 }

	let index = 0
	// 打开抽屉

	// 图标选择器回调
	const iconCallBack = (value) => {
		if (value) {
			formRef.value.clearValidate('icon')
		}
		formData.value.icon = value
	}

	// 默认要校验的
	const formRules = {
		name: [required('请输入姓名')],
		phone: [required('请输入手机号'), rules.phone],
		target: [required('请输入目标')],
		email: [required('请输入邮箱'), rules.email],
		demand: [required('请输入需求')]
	}
	const joinLoading = ref(false)
	// 验证并提交数据
	const onSubmit = () => {
		formRef.value
			.validate()
			.then(() => {
				joinLoading.value = true
				apis
					.submitForm({ ...formData.value, create_time: dayjs().format('YYYY-MM-DD HH:mm:ss'), valid: 2 }, false)
					.then(() => {
						notification.open({
							type: 'success',
							message: `提交成功`,
							description: '我们已收到您的申请, 请耐心等待!',
							duration: 0
						})
					})
			})
			.catch((error) => {
				console.log(error)
			})
			.finally(() => {
				joinLoading.value = false
			})
	}

	const treeOption = [
		{
			value: '农业、林业、渔业',
			label: '农业、林业、渔业',
			children: [
				{ value: '农业', label: '农业' },
				{ value: '林业', label: '林业' },
				{ value: '渔业', label: '渔业' },
				{ value: '畜牧业', label: '畜牧业' }
			]
		},
		{
			value: '制造业',
			label: '制造业',
			children: [
				{ value: '食品制造', label: '食品制造' },
				{ value: '纺织品制造', label: '纺织品制造' },
				{ value: '化工产品制造', label: '化工产品制造' },
				{ value: '电子产品制造', label: '电子产品制造' },
				{ value: '机械制造', label: '机械制造' }
			]
		},
		{
			value: '建筑业',
			label: '建筑业',
			children: [
				{ value: '住宅建筑', label: '住宅建筑' },
				{ value: '商业建筑', label: '商业建筑' },
				{ value: '基础设施建设', label: '基础设施建设' }
			]
		},
		{
			value: '批发和零售业',
			label: '批发和零售业',
			children: [
				{ value: '批发贸易', label: '批发贸易' },
				{ value: '零售贸易', label: '零售贸易' },
				{ value: '电商', label: '电商' }
			]
		},
		{
			value: '交通运输、仓储和邮政业',
			label: '交通运输、仓储和邮政业',
			children: [
				{ value: '公路运输', label: '公路运输' },
				{ value: '铁路运输', label: '铁路运输' },
				{ value: '航空运输', label: '航空运输' },
				{ value: '仓储服务', label: '仓储服务' },
				{ value: '邮政服务', label: '邮政服务' }
			]
		},
		{
			value: '信息传输、软件和信息技术服务业',
			label: '信息传输、软件和信息技术服务业',
			children: [
				{ value: '电信服务', label: '电信服务' },
				{ value: '软件开发', label: '软件开发' },
				{ value: 'IT服务', label: 'IT服务' },
				{ value: '互联网服务', label: '互联网服务' }
			]
		},
		{
			value: '金融业',
			label: '金融业',
			children: [
				{ value: '银行', label: '银行' },
				{ value: '保险', label: '保险' },
				{ value: '证券', label: '证券' },
				{ value: '投资', label: '投资' }
			]
		},
		{
			value: '房地产业',
			label: '房地产业',
			children: [
				{ value: '房地产开发', label: '房地产开发' },
				{ value: '房地产中介', label: '房地产中介' },
				{ value: '物业管理', label: '物业管理' }
			]
		},
		{
			value: '科学研究和技术服务业',
			label: '科学研究和技术服务业',
			children: [
				{ value: '科学研究', label: '科学研究' },
				{ value: '专业技术服务', label: '专业技术服务' },
				{ value: '环境保护服务', label: '环境保护服务' }
			]
		},
		{
			value: '水利、环境和公共设施管理业',
			label: '水利、环境和公共设施管理业',
			children: [
				{ value: '水利管理', label: '水利管理' },
				{ value: '环境管理', label: '环境管理' },
				{ value: '公共设施管理', label: '公共设施管理' }
			]
		},
		{
			value: '居民服务、修理和其他服务业',
			label: '居民服务、修理和其他服务业',
			children: [
				{ value: '居民服务', label: '居民服务' },
				{ value: '维修服务', label: '维修服务' },
				{ value: '其他个人服务', label: '其他个人服务' }
			]
		},
		{
			value: '教育',
			label: '教育',
			children: [
				{ value: '学前教育', label: '学前教育' },
				{ value: '基础教育', label: '基础教育' },
				{ value: '高等教育', label: '高等教育' },
				{ value: '职业教育', label: '职业教育' }
			]
		},
		{
			value: '卫生和社会工作',
			label: '卫生和社会工作',
			children: [
				{ value: '医疗服务', label: '医疗服务' },
				{ value: '社会工作', label: '社会工作' },
				{ value: '护理服务', label: '护理服务' }
			]
		},
		{
			value: '文化、体育和娱乐业',
			label: '文化、体育和娱乐业',
			children: [
				{ value: '文化艺术', label: '文化艺术' },
				{ value: '体育运动', label: '体育运动' },
				{ value: '娱乐服务', label: '娱乐服务' }
			]
		},
		{
			value: '公共管理、社会保障和社会组织',
			label: '公共管理、社会保障和社会组织',
			children: [
				{ value: '政府机构', label: '政府机构' },
				{ value: '社会保障', label: '社会保障' },
				{ value: '社会组织', label: '社会组织' }
			]
		},
		{
			value: '国际组织',
			label: '国际组织',
			children: []
		}
	]
</script>
<style scoped lang="less">
	.coop {
		width: 100%;
		height: 285px;
		background-size: 100% 100%;
		font-weight: 500;
		font-size: 40px;
		color: #fff;
		background: url('@/assets/images/coop.png') no-repeat;
		background-size: 100% 100%;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.container {
		width: 800px;
		margin: 40px auto;
	}

	@media (max-width: 768px) {
		.box {
			min-height: 100vh;
			overflow-y: scroll;
			padding-bottom: 80px;
		}
		.coop {
			width: 100%;
			height: 18vh;
			background-size: 100% 100%;
			font-weight: 500;
			font-size: 40px;
			color: #fff;
			background: url('@/assets/images/coop.png') no-repeat;
			background-size: 100% 100%;
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.container {
			width: 100%;
			margin: 40px auto;
			padding: 20px;
		}
	}
</style>
